<style lang="stylus" scoped>

</style>

<template>
  <div class="row q-col-gutter-x-md">
    <div :class="[isNodeSelected ? 'col-lg-3 col-md-3' : 'col-lg-12 col-md-12', 'col-sm-12 col-xs-12']">
      <q-card>
        <q-card-section :style="{height: windowHeight}">
          <q-scroll-area class="fit">
            <q-tree
              ref="orgTree"
              :nodes="nodes"
              node-key="id"
              label-key="name"
              :selected.sync="nodeSelected"
              selected-color="primary"
              :expanded.sync="nodeExpanded"
              @update:selected="nodeSelectedHandler"
            >
              <template v-slot:header-root="prop">
                <div :class="(nodeSelectedHeader === 'root' && nodeSelected === prop.node.id)? 'bg-grey-3 row items-center': 'row items-center'" style="width:100%">
                  <q-badge transparent align="middle" color="primary">
                    公司
                  </q-badge>
                  <div class="text-weight-bold ellipsis q-ml-xs" style="width:80%" :title="prop.node.code + ' - ' + prop.node.name">{{ prop.node.code + ' - ' + prop.node.name }}</div>
                </div>
                <q-popup-proxy context-menu>
                  <q-list dense class="text-grey">
                    <q-item clickable v-close-popup @click="addChild('company', prop.node)">
                      <q-item-section>
                        <q-item-label>新增公司</q-item-label>
                      </q-item-section>
                    </q-item>
                    <q-item clickable v-close-popup @click="addChild('dep', prop.node)">
                      <q-item-section>
                        <q-item-label>新增部门</q-item-label>
                      </q-item-section>
                    </q-item>
                    <!-- <q-item clickable v-close-popup @click="editNode('company', prop.node)">
                      <q-item-section>
                        <q-item-label>修改</q-item-label>
                      </q-item-section>
                    </q-item> -->
                  </q-list>
                </q-popup-proxy>
              </template>

              <template v-slot:header-company="prop">
                <div :class="(nodeSelectedHeader === 'company' && nodeSelected === prop.node.id)? 'bg-grey-3 row items-center': 'row items-center'" style="width:100%">
                  <q-badge transparent align="middle" color="primary">
                    子公司
                  </q-badge>
                  <div class="ellipsis q-ml-xs" style="width:70%" :title="prop.node.code + ' - ' + prop.node.name">{{ prop.node.code + ' - ' + prop.node.name }}</div>
                </div>
                <q-popup-proxy context-menu>
                  <q-list dense class="text-grey">
                    <q-item clickable v-close-popup @click="addChild('dep', prop.node)">
                      <q-item-section>
                        <q-item-label>新增部门</q-item-label>
                      </q-item-section>
                    </q-item>
                    <!-- <q-item clickable v-close-popup @click="editNode('company', prop.node)">
                      <q-item-section>
                        <q-item-label>修改</q-item-label>
                      </q-item-section>
                    </q-item> -->
                    <q-item clickable v-close-popup @click="delNode(prop.node)">
                      <q-item-section>
                        <q-item-label>删除</q-item-label>
                      </q-item-section>
                    </q-item>
                  </q-list>
                </q-popup-proxy>
              </template>

              <template v-slot:header-dep="prop">
                <div :class="(nodeSelectedHeader === 'dep' && nodeSelected === prop.node.id)? 'bg-grey-3 row items-center': 'row items-center'" style="width:100%">
                  <q-badge transparent align="middle" color="orange">
                    部门
                  </q-badge>
                  <div class="ellipsis q-ml-xs" style="width:72%" :title="prop.node.code + ' - ' + prop.node.name">{{ prop.node.code + ' - ' + prop.node.name }}</div>
                </div>
                <q-popup-proxy context-menu>
                  <q-list dense class="text-grey">
                    <q-item clickable v-close-popup @click="addChild('dep', prop.node)">
                      <q-item-section>
                        <q-item-label>新增部门</q-item-label>
                      </q-item-section>
                    </q-item>
                    <q-item clickable v-close-popup @click="addChild('post', prop.node)">
                      <q-item-section>
                        <q-item-label>新增岗位</q-item-label>
                      </q-item-section>
                    </q-item>
                    <!-- <q-item clickable v-close-popup @click="editNode('dep', prop.node)">
                      <q-item-section>
                        <q-item-label>修改</q-item-label>
                      </q-item-section>
                    </q-item> -->
                    <q-item clickable v-close-popup @click="delNode(prop.node)">
                      <q-item-section>
                        <q-item-label>删除</q-item-label>
                      </q-item-section>
                    </q-item>
                  </q-list>
                </q-popup-proxy>
              </template>

              <template v-slot:header-post="prop">
                <div :class="(nodeSelectedHeader === 'post' && nodeSelected === prop.node.id)? 'bg-grey-3 row items-center': 'row items-center'" style="width:100%">
                  <q-badge transparent align="middle" color="positive">
                    岗位
                  </q-badge>
                  <div class="ellipsis q-ml-xs" style="width:72%" :title="prop.node.code + ' - ' + prop.node.name">{{ prop.node.code + ' - ' + prop.node.name }}</div>
                </div>
                <q-popup-proxy context-menu>
                  <q-list dense class="text-grey">
                    <q-item clickable v-close-popup @click="addChild('post', prop.node)">
                      <q-item-section>
                        <q-item-label>新增岗位</q-item-label>
                      </q-item-section>
                    </q-item>
                    <!-- <q-item clickable v-close-popup @click="editNode('post', prop.node)">
                      <q-item-section>
                        <q-item-label>修改</q-item-label>
                      </q-item-section>
                    </q-item> -->
                    <q-item clickable v-close-popup @click="delNode(prop.node)">
                      <q-item-section>
                        <q-item-label>删除</q-item-label>
                      </q-item-section>
                    </q-item>
                  </q-list>
                </q-popup-proxy>
              </template>

              <template v-slot:header-site="prop">
                <div :class="(nodeSelectedHeader === 'site' && nodeSelected === prop.node.id)? 'bg-grey-3 row items-center': 'row items-center'" style="width:100%">
                  <q-badge transparent align="middle" color="accent">
                    地点
                  </q-badge>
                  <div class="ellipsis q-ml-xs" style="width:72%" :title="prop.node.code + ' - ' + prop.node.name">{{ prop.node.code + ' - ' + prop.node.name }}</div>
                </div>
              </template>

              <template v-slot:header-location="prop">
                <div :class="(nodeSelectedHeader === 'location' && nodeSelected === prop.node.id)? 'bg-grey-3 row items-center': 'row items-center'" style="width:100%">
                  <q-badge transparent align="middle" color="grey">
                    库位
                  </q-badge>
                  <div class="ellipsis q-ml-xs" style="width:72%" :title="prop.node.code + ' - ' + prop.node.name">{{ prop.node.code + ' - ' + prop.node.name }}</div>
                </div>
              </template>

              <template v-slot:body-toggle="prop">
                <p class="text-caption">{{ prop.node.caption }}</p>
                <q-toggle v-model="prop.node.enabled" label="I agree to the terms and conditions" />
              </template>
            </q-tree>
          </q-scroll-area>
        </q-card-section>
      </q-card>
    </div>
    <div v-if="isNodeSelected" :class="[isNodeSelected ? 'col-lg-9 col-md-9' : '', 'col-sm-12 col-xs-12']">
      <q-card v-if="nodeSelectedHeader === 'root' || nodeSelectedHeader === 'company'">
        <q-card-section>
          <q-tabs
            v-model="companyTabs"
            dense
            inline-label
            class="text-grey"
            active-color="primary"
            indicator-color="primary"
            align="left"
            :breakpoint="0"
            narrow-indicator
          >
            <q-tab name="tab1" icon="fas fa-cube" label="地点" />
            <q-tab name="tab2" icon="fas fa-cube" label="业务组织" />
          </q-tabs>
          <q-separator />
          <q-tab-panels v-model="companyTabs" animated>
            <q-tab-panel class="q-pa-none" name="tab1">
              <q-table
                flat
                dense
                class="bg-white shadow-2"
                :data="dataSite"
                :columns="columnsSite"
                row-key="id"
                separator="cell"
                selection="multiple"
                :selected.sync="selectedSite"
                :visible-columns="visibleColumnsSite"
                :filter="searchFormSite"
                :pagination.sync="paginationSite"
                :rows-per-page-options="[3, 5, 10, 20]"
                no-data-label="暂无数据"
                table-class="h-custom"
                @request="tableDataGet"
              >
                <template v-slot:top-left="props">
                  <q-btn size="sm" color="light-blue" :label="$t('分配')" @click="addSite"/>
                  <!-- <q-btn color="negative" flat :label="$t('批量删除')" class="q-ml-sm"/> -->
                </template>
                <template v-slot:top-right="props">
                  <q-select
                    v-model="visibleColumnsSite"
                    multiple
                    borderless
                    options-dense
                    :display-value="$t('显示列')"
                    emit-value
                    map-options
                    :options="columnsSite"
                    option-value="name"
                    class="q-mx-lg"
                  >
                    <template v-slot:option="scope">
                      <q-item
                        v-bind="scope.itemProps"
                        v-on="scope.itemEvents"
                        v-if="!scope.opt.required"
                      >
                        <q-item-section avatar>
                          <q-toggle color="blue" v-model="visibleColumnsSite" :val="scope.opt.name" />
                        </q-item-section>
                        <q-item-section style="min-width:60px">
                          {{ scope.opt.label }}
                        </q-item-section>
                      </q-item>
                    </template>
                  </q-select>
                  <q-toggle
                    v-model="searchToggleSite"
                    left-label
                    label="搜索"
                    color="blue"
                    checked-icon="check"
                    unchecked-icon="clear"
                    keep-color
                  />
                  <q-btn
                    flat round dense
                    :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
                    @click="props.toggleFullscreen"
                    class="q-ml-md"
                  />
                </template>
                <template v-if="searchToggleSite" v-slot:top-row="props">
                  <q-tr :props="props">
                    <q-td>
                    </q-td>
                    <q-td v-for="col in props.cols" :key="col.name" class="relative-position">
                      <q-btn color="primary" dense flat icon="search" class="absolute-center" v-if="col.name==='action'" @click="listGet({ pagination: pagination, filter: searchFormSite })"/>
                      <q-input dense outlined v-model="searchFormSite[col.name]" v-else/>
                    </q-td>
                  </q-tr>
                </template>
                <template v-slot:header="props">
                  <q-tr :props="props">
                    <q-th>
                      <q-checkbox indeterminate-value="some" dense v-model="props.selected" />
                    </q-th>
                    <q-th v-for="col in props.cols" :key="col.name" :props="props">
                      {{ col.label }}
                    </q-th>
                  </q-tr>
                </template>
                <template v-slot:body="props">
                  <q-tr :props="props">
                    <q-td width="52">
                      <q-checkbox dense v-model="props.selected" />
                    </q-td>
                    <q-td key="action" :props="props">
                      <q-btn-dropdown
                        color="blue"
                        size="sm"
                        dense
                        menu-anchor="bottom left"
                        menu-self="top left"
                        content-class="text-grey"
                        icon="settings">
                        <q-list dense>
                          <q-item clickable v-close-popup @click="delSiteRow(props.row)">
                            <q-item-section>
                              <q-item-label>删除</q-item-label>
                            </q-item-section>
                          </q-item>
                        </q-list>
                      </q-btn-dropdown>
                    </q-td>
                    <q-td key="siteCode" :props="props">
                      <span class="text-light-blue cursor-pointer" @click="toDetails(props.row.siteId, 'site')">{{ props.row.siteCode  }}</span>
                    </q-td>
                    <q-td key="siteName" :props="props">{{ props.row.siteName }}</q-td>
                    <q-td key="createTime" :props="props">{{ props.row.createTime }}</q-td>
                  </q-tr>
                  <q-tr v-show="props.expand" :props="props">
                    <q-td colspan="100%">
                    </q-td>
                  </q-tr>
                </template>
                <template v-slot:pagination="props">
                  <q-pagination
                    v-model="paginationSite.page"
                    color="blue"
                    :max-pages="5"
                    :max="pagesSite"
                    :boundaryLinks="true"
                    :directionLinks="true"
                  />
                  共 {{ totalSite }} 条
                </template>
              </q-table>
            </q-tab-panel>
            <q-tab-panel class="q-pa-none" name="tab2">
              <q-splitter
                v-model="splitterModel"
              >

                <template v-slot:before>
                  <q-tabs
                    v-model="companySecondTabs"
                    vertical
                    dense
                    class="text-teal"
                  >
                    <q-tab v-for="tab in tabsList" :key="tab.id" :name="tab.code" :label="tab.name" />
                  </q-tabs>
                </template>

                <template v-slot:after>
                  <q-table
                    flat
                    dense
                    class="bg-white"
                    :data="dataBorg"
                    :columns="columnsBorg"
                    row-key="id"
                    separator="cell"
                    selection="multiple"
                    :selected.sync="selectedBorg"
                    :visible-columns="visibleColumnsBorg"
                    :filter="searchFormBorg"
                    :pagination.sync="paginationBorg"
                    :rows-per-page-options="[3, 5, 10, 20]"
                    no-data-label="暂无数据"
                    table-class="h-custom"
                    @request="tableDataGet"
                  >
                    <template v-slot:top-left="props">
                      <q-btn size="sm" color="light-blue" :label="$t('分配')" @click="addBorg"/>
                      <!-- <q-btn color="negative" flat :label="$t('批量删除')" class="q-ml-sm"/> -->
                    </template>
                    <template v-slot:top-right="props">
                      <q-select
                        v-model="visibleColumnsBorg"
                        multiple
                        borderless
                        options-dense
                        :display-value="$t('显示列')"
                        emit-value
                        map-options
                        :options="columnsBorg"
                        option-value="name"
                        class="q-mx-lg"
                      >
                        <template v-slot:option="scope">
                          <q-item
                            v-bind="scope.itemProps"
                            v-on="scope.itemEvents"
                            v-if="!scope.opt.required"
                          >
                            <q-item-section avatar>
                              <q-toggle color="blue" v-model="visibleColumnsBorg" :val="scope.opt.name" />
                            </q-item-section>
                            <q-item-section style="min-width:60px">
                              {{ scope.opt.label }}
                            </q-item-section>
                          </q-item>
                        </template>
                      </q-select>
                      <q-toggle
                        v-model="searchToggleBorg"
                        left-label
                        label="搜索"
                        color="blue"
                        checked-icon="check"
                        unchecked-icon="clear"
                        keep-color
                      />
                      <q-btn
                        flat round dense
                        :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
                        @click="props.toggleFullscreen"
                        class="q-ml-md"
                      />
                    </template>
                    <template v-if="searchToggleBorg" v-slot:top-row="props">
                      <q-tr :props="props">
                        <q-td>
                        </q-td>
                        <q-td v-for="col in props.cols" :key="col.name" class="relative-position">
                          <q-btn color="primary" dense flat icon="search" class="absolute-center" v-if="col.name==='action'" @click="listGet({ pagination: pagination, filter: searchFormBorg })"/>
                          <q-input dense outlined v-model="searchFormBorg[col.name]" v-else/>
                        </q-td>
                      </q-tr>
                    </template>
                    <template v-slot:header="props">
                      <q-tr :props="props">
                        <q-th>
                          <q-checkbox indeterminate-value="some" dense v-model="props.selected" />
                        </q-th>
                        <q-th v-for="col in props.cols" :key="col.name" :props="props">
                          {{ col.label }}
                        </q-th>
                      </q-tr>
                    </template>
                    <template v-slot:body="props">
                      <q-tr :props="props">
                        <q-td width="52">
                          <q-checkbox dense v-model="props.selected" />
                        </q-td>
                        <q-td key="action" :props="props">
                          <q-btn-dropdown
                            color="blue"
                            size="sm"
                            dense
                            menu-anchor="bottom left"
                            menu-self="top left"
                            content-class="text-grey"
                            icon="settings">
                            <q-list dense>
                              <q-item clickable v-close-popup @click="delBorgRow(props.row)">
                                <q-item-section>
                                  <q-item-label>删除</q-item-label>
                                </q-item-section>
                              </q-item>
                            </q-list>
                          </q-btn-dropdown>
                        </q-td>
                        <q-td key="borgCode" :props="props">{{ props.row.borgCode  }}</q-td>
                        <q-td key="borgName" :props="props">{{ props.row.borgName }}</q-td>
                        <q-td key="createTime" :props="props">{{ props.row.createTime }}</q-td>
                      </q-tr>
                      <q-tr v-show="props.expand" :props="props">
                        <q-td colspan="100%">
                        </q-td>
                      </q-tr>
                    </template>
                    <template v-slot:pagination="props">
                      <q-pagination
                        v-model="paginationBorg.page"
                        color="blue"
                        :max-pages="5"
                        :max="pagesBorg"
                        :boundaryLinks="true"
                        :directionLinks="true"
                      />
                      共 {{ totalBorg }} 条
                    </template>
                  </q-table>
                </template>
              </q-splitter>
            </q-tab-panel>
          </q-tab-panels>
        </q-card-section>
      </q-card>

      <q-card v-if="nodeSelectedHeader === 'dep'">
        <q-card-section>
          <q-tabs
            v-model="depTabs"
            dense
            inline-label
            class="text-grey"
            active-color="primary"
            indicator-color="primary"
            align="left"
            :breakpoint="0"
            narrow-indicator
          >
            <q-tab name="tab1" icon="fas fa-cube" label="业务组" />
          </q-tabs>
          <q-separator />
          <q-tab-panels v-model="depTabs" animated>
            <q-tab-panel class="q-pa-none" name="tab1">
              <q-splitter
                v-model="splitterModel"
              >

                <template v-slot:before>
                  <q-tabs
                    v-model="depSecondTabs"
                    vertical
                    dense
                    class="text-teal"
                  >
                    <q-tab name="200" label="申购组" />
                  </q-tabs>
                </template>

                <template v-slot:after>
                  <q-tab-panels
                    v-model="depSecondTabs"
                    animated
                  >
                    <q-tab-panel name="200" class="q-pa-none">
                      <q-table
                        flat
                        dense
                        class="bg-white"
                        :data="dataDep"
                        :columns="columnsDep"
                        row-key="id"
                        separator="cell"
                        selection="multiple"
                        :selected.sync="selectedDep"
                        :visible-columns="visibleColumnsDep"
                        :filter="searchFormDep"
                        :pagination.sync="paginationDep"
                        :rows-per-page-options="[3, 5, 10, 20]"
                        no-data-label="暂无数据"
                        table-class="h-custom"
                        @request="tableDataGetDep"
                      >
                        <template v-slot:top-left="props">
                          <q-btn size="sm" color="light-blue" :label="$t('分配')" @click="addDep"/>
                          <!-- <q-btn color="negative" flat :label="$t('批量删除')" class="q-ml-sm"/> -->
                        </template>
                        <template v-slot:top-right="props">
                          <q-select
                            v-model="visibleColumnsDep"
                            multiple
                            borderless
                            options-dense
                            :display-value="$t('显示列')"
                            emit-value
                            map-options
                            :options="columnsDep"
                            option-value="name"
                            class="q-mx-lg"
                          >
                            <template v-slot:option="scope">
                              <q-item
                                v-bind="scope.itemProps"
                                v-on="scope.itemEvents"
                                v-if="!scope.opt.required"
                              >
                                <q-item-section avatar>
                                  <q-toggle color="blue" v-model="visibleColumnsDep" :val="scope.opt.name" />
                                </q-item-section>
                                <q-item-section style="min-width:60px">
                                  {{ scope.opt.label }}
                                </q-item-section>
                              </q-item>
                            </template>
                          </q-select>
                          <q-toggle
                            v-model="searchToggleDep"
                            left-label
                            label="搜索"
                            color="blue"
                            checked-icon="check"
                            unchecked-icon="clear"
                            keep-color
                          />
                          <q-btn
                            flat round dense
                            :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
                            @click="props.toggleFullscreen"
                            class="q-ml-md"
                          />
                        </template>
                        <template v-if="searchToggleDep" v-slot:top-row="props">
                          <q-tr :props="props">
                            <q-td>
                            </q-td>
                            <q-td v-for="col in props.cols" :key="col.name" class="relative-position">
                              <q-btn color="primary" dense flat icon="search" class="absolute-center" v-if="col.name==='action'" @click="listGet({ pagination: pagination, filter: searchFormGroup })"/>
                              <q-input dense outlined v-model="searchFormDep[col.name]" v-else/>
                            </q-td>
                          </q-tr>
                        </template>
                        <template v-slot:header="props">
                          <q-tr :props="props">
                            <q-th>
                              <q-checkbox indeterminate-value="some" dense v-model="props.selected" />
                            </q-th>
                            <q-th v-for="col in props.cols" :key="col.name" :props="props">
                              {{ col.label }}
                            </q-th>
                          </q-tr>
                        </template>
                        <template v-slot:body="props">
                          <q-tr :props="props">
                            <q-td width="52">
                              <q-checkbox dense v-model="props.selected" />
                            </q-td>
                            <q-td key="action" :props="props">
                              <q-btn-dropdown
                                color="blue"
                                size="sm"
                                dense
                                menu-anchor="bottom left"
                                menu-self="top left"
                                content-class="text-grey"
                                icon="settings">
                                <q-list dense>
                                  <q-item clickable v-close-popup @click="delGroupRowDep(props.row)">
                                    <q-item-section>
                                      <q-item-label>删除</q-item-label>
                                    </q-item-section>
                                  </q-item>
                                </q-list>
                              </q-btn-dropdown>
                            </q-td>
                            <q-td key="groupCode" :props="props">{{ props.row.groupCode  }}</q-td>
                            <q-td key="groupName" :props="props">{{ props.row.groupName }}</q-td>
                            <q-td key="createTime" :props="props">{{ props.row.createTime }}</q-td>
                          </q-tr>
                          <q-tr v-show="props.expand" :props="props">
                            <q-td colspan="100%">
                            </q-td>
                          </q-tr>
                        </template>
                        <template v-slot:pagination="props">
                          <q-pagination
                            v-model="paginationDep.page"
                            color="blue"
                            :max-pages="5"
                            :max="pagesDep"
                            :boundaryLinks="true"
                            :directionLinks="true"
                          />
                          共 {{ totalDep }} 条
                        </template>
                      </q-table>
                    </q-tab-panel>
                  </q-tab-panels>
                </template>

              </q-splitter>
            </q-tab-panel>
          </q-tab-panels>
        </q-card-section>
      </q-card>
      <q-card v-if="nodeSelectedHeader === 'post'">
        <q-card-section>
          <q-tabs
            v-model="postTabs"
            dense
            inline-label
            class="text-grey"
            active-color="primary"
            indicator-color="primary"
            align="left"
            :breakpoint="0"
            narrow-indicator
            @input="nodeSelectedHandler(nodeSelected)"
          >
            <q-tab name="tab1" icon="fas fa-user-tag" label="角色" />
            <q-tab name="tab2" icon="fas fa-user" label="用户" />
            <q-tab name="tab3" icon="fas fa-cube" label="业务组" />
          </q-tabs>
          <q-separator />
          <q-tab-panels v-model="postTabs" animated>
            <q-tab-panel class="q-pa-none" name="tab1">
              <q-table
                flat
                dense
                class="bg-white"
                :data="dataRole"
                :columns="columnsRole"
                row-key="id"
                separator="cell"
                selection="multiple"
                :selected.sync="selectedRole"
                :visible-columns="visibleColumnsRole"
                :filter="searchFormRole"
                :pagination.sync="paginationRole"
                :rows-per-page-options="[3, 5, 10, 20]"
                no-data-label="暂无数据"
                table-class="h-custom"
                @request="tableDataGet"
              >
                <template v-slot:top-left="props">
                  <q-btn size="sm" color="light-blue" :label="$t('分配')" @click="addRole"/>
                  <!-- <q-btn color="negative" flat :label="$t('批量删除')" class="q-ml-sm"/> -->
                </template>
                <template v-slot:top-right="props">
                  <q-select
                    v-model="visibleColumnsRole"
                    multiple
                    borderless
                    options-dense
                    :display-value="$t('显示列')"
                    emit-value
                    map-options
                    :options="columnsRole"
                    option-value="name"
                    class="q-mx-lg"
                  >
                    <template v-slot:option="scope">
                      <q-item
                        v-bind="scope.itemProps"
                        v-on="scope.itemEvents"
                        v-if="!scope.opt.required"
                      >
                        <q-item-section avatar>
                          <q-toggle color="blue" v-model="visibleColumnsRole" :val="scope.opt.name" />
                        </q-item-section>
                        <q-item-section style="min-width:60px">
                          {{ scope.opt.label }}
                        </q-item-section>
                      </q-item>
                    </template>
                  </q-select>
                  <q-toggle
                    v-model="searchToggleRole"
                    left-label
                    label="搜索"
                    color="blue"
                    checked-icon="check"
                    unchecked-icon="clear"
                    keep-color
                  />
                  <q-btn
                    flat round dense
                    :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
                    @click="props.toggleFullscreen"
                    class="q-ml-md"
                  />
                </template>
                <template v-if="searchToggleRole" v-slot:top-row="props">
                  <q-tr :props="props">
                    <q-td>
                    </q-td>
                    <q-td v-for="col in props.cols" :key="col.name" class="relative-position">
                      <q-btn color="primary" dense flat icon="search" class="absolute-center" v-if="col.name==='action'" @click="listGet({ pagination: pagination, filter: searchFormRole })"/>
                      <q-input dense outlined v-model="searchFormRole[col.name]" v-else/>
                    </q-td>
                  </q-tr>
                </template>
                <template v-slot:header="props">
                  <q-tr :props="props">
                    <q-th>
                      <q-checkbox indeterminate-value="some" dense v-model="props.selected" />
                    </q-th>
                    <q-th v-for="col in props.cols" :key="col.name" :props="props">
                      {{ col.label }}
                    </q-th>
                  </q-tr>
                </template>
                <template v-slot:body="props">
                  <q-tr :props="props">
                    <q-td width="52">
                      <q-checkbox dense v-model="props.selected" />
                    </q-td>
                    <q-td key="action" :props="props">
                      <q-btn-dropdown
                        color="blue"
                        size="sm"
                        dense
                        menu-anchor="bottom left"
                        menu-self="top left"
                        content-class="text-grey"
                        icon="settings">
                        <q-list dense>
                          <q-item clickable v-close-popup @click="delRoleRow(props.row)">
                            <q-item-section>
                              <q-item-label>删除</q-item-label>
                            </q-item-section>
                          </q-item>
                        </q-list>
                      </q-btn-dropdown>
                    </q-td>
                    <q-td key="roleCode" :props="props">{{ props.row.roleCode  }}</q-td>
                    <q-td key="roleName" :props="props">{{ props.row.roleName }}</q-td>
                    <q-td key="createTime" :props="props">{{ props.row.createTime }}</q-td>
                  </q-tr>
                  <q-tr v-show="props.expand" :props="props">
                    <q-td colspan="100%">
                    </q-td>
                  </q-tr>
                </template>
                <template v-slot:pagination="props">
                  <q-pagination
                    v-model="paginationRole.page"
                    color="blue"
                    :max-pages="5"
                    :max="pagesRole"
                    :boundaryLinks="true"
                    :directionLinks="true"
                  />
                  共 {{ totalRole }} 条
                </template>
              </q-table>
            </q-tab-panel>
            <q-tab-panel class="q-pa-none" name="tab2">
              <q-table
                flat
                dense
                class="bg-white"
                :data="dataUser"
                :columns="columnsUser"
                row-key="id"
                separator="cell"
                selection="multiple"
                :selected.sync="selectedUser"
                :visible-columns="visibleColumnsUser"
                :filter="searchFormUser"
                :pagination.sync="paginationUser"
                :rows-per-page-options="[3, 5, 10, 20]"
                no-data-label="暂无数据"
                table-class="h-custom"
                @request="tableDataGet"
              >
                <template v-slot:top-left="props">
                  <q-btn size="sm" color="light-blue" :label="$t('分配')" @click="addUser"/>
                  <!-- <q-btn color="negative" flat :label="$t('批量删除')" class="q-ml-sm"/> -->
                </template>
                <template v-slot:top-right="props">
                  <q-select
                    v-model="visibleColumnsUser"
                    multiple
                    borderless
                    options-dense
                    :display-value="$t('显示列')"
                    emit-value
                    map-options
                    :options="columnsUser"
                    option-value="name"
                    class="q-mx-lg"
                  >
                    <template v-slot:option="scope">
                      <q-item
                        v-bind="scope.itemProps"
                        v-on="scope.itemEvents"
                        v-if="!scope.opt.required"
                      >
                        <q-item-section avatar>
                          <q-toggle color="blue" v-model="visibleColumnsUser" :val="scope.opt.name" />
                        </q-item-section>
                        <q-item-section style="min-width:60px">
                          {{ scope.opt.label }}
                        </q-item-section>
                      </q-item>
                    </template>
                  </q-select>
                  <q-toggle
                    v-model="searchToggleUser"
                    left-label
                    label="搜索"
                    color="blue"
                    checked-icon="check"
                    unchecked-icon="clear"
                    keep-color
                  />
                  <q-btn
                    flat round dense
                    :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
                    @click="props.toggleFullscreen"
                    class="q-ml-md"
                  />
                </template>
                <template v-if="searchToggleUser" v-slot:top-row="props">
                  <q-tr :props="props">
                    <q-td>
                    </q-td>
                    <q-td v-for="col in props.cols" :key="col.name" class="relative-position">
                      <q-btn color="primary" dense flat icon="search" class="absolute-center" v-if="col.name==='action'" @click="listGet({ pagination: pagination, filter: searchFormUser })"/>
                      <q-input dense outlined v-model="searchFormUser[col.name]" v-else/>
                    </q-td>
                  </q-tr>
                </template>
                <template v-slot:header="props">
                  <q-tr :props="props">
                    <q-th>
                      <q-checkbox indeterminate-value="some" dense v-model="props.selected" />
                    </q-th>
                    <q-th v-for="col in props.cols" :key="col.name" :props="props">
                      {{ col.label }}
                    </q-th>
                  </q-tr>
                </template>
                <template v-slot:body="props">
                  <q-tr :props="props">
                    <q-td width="52">
                      <q-checkbox dense v-model="props.selected" />
                    </q-td>
                    <q-td key="action" :props="props">
                      <q-btn-dropdown
                        color="blue"
                        size="sm"
                        dense
                        menu-anchor="bottom left"
                        menu-self="top left"
                        content-class="text-grey"
                        icon="settings">
                        <q-list dense>
                          <q-item clickable v-close-popup @click="delUserRow(props.row)">
                            <q-item-section>
                              <q-item-label>删除</q-item-label>
                            </q-item-section>
                          </q-item>
                        </q-list>
                      </q-btn-dropdown>
                    </q-td>
                    <q-td key="loginName" :props="props">{{ props.row.loginName  }}</q-td>
                    <q-td key="email" :props="props">{{ props.row.email }}</q-td>
                    <q-td key="createTime" :props="props">{{ props.row.createTime }}</q-td>
                  </q-tr>
                  <q-tr v-show="props.expand" :props="props">
                    <q-td colspan="100%">
                    </q-td>
                  </q-tr>
                </template>
                <template v-slot:pagination="props">
                  <q-pagination
                    v-model="paginationUser.page"
                    color="blue"
                    :max-pages="5"
                    :max="pagesUser"
                    :boundaryLinks="true"
                    :directionLinks="true"
                  />
                  共 {{ totalUser }} 条
                </template>
              </q-table>
            </q-tab-panel>
            <q-tab-panel class="q-pa-none" name="tab3">
              <q-splitter
                v-model="splitterModel"
              >
                <template v-slot:before>
                  <q-tabs
                    v-model="postSecondTabs"
                    vertical
                    dense
                    class="text-teal"
                  >
                    <q-tab v-for="tab in tabsList" :key="tab.id" :name="tab.code" :label="tab.name" />
                  </q-tabs>
                </template>
                <template v-slot:after>
                  <q-table
                    flat
                    dense
                    class="bg-white"
                    :data="dataGroup"
                    :columns="columnsGroup"
                    row-key="id"
                    separator="cell"
                    selection="multiple"
                    :selected.sync="selectedGroup"
                    :visible-columns="visibleColumnsGroup"
                    :filter="searchFormGroup"
                    :pagination.sync="paginationGroup"
                    :rows-per-page-options="[3, 5, 10, 20]"
                    no-data-label="暂无数据"
                    table-class="h-custom"
                    @request="tableDataGet"
                  >
                    <template v-slot:top-left="props">
                      <q-btn size="sm" color="light-blue" :label="$t('分配')" @click="addGroup"/>
                      <!-- <q-btn color="negative" flat :label="$t('批量删除')" class="q-ml-sm"/> -->
                    </template>
                    <template v-slot:top-right="props">
                      <q-select
                        v-model="visibleColumnsGroup"
                        multiple
                        borderless
                        options-dense
                        :display-value="$t('显示列')"
                        emit-value
                        map-options
                        :options="columnsGroup"
                        option-value="name"
                        class="q-mx-lg"
                      >
                        <template v-slot:option="scope">
                          <q-item
                            v-bind="scope.itemProps"
                            v-on="scope.itemEvents"
                            v-if="!scope.opt.required"
                          >
                            <q-item-section avatar>
                              <q-toggle color="blue" v-model="visibleColumnsGroup" :val="scope.opt.name" />
                            </q-item-section>
                            <q-item-section style="min-width:60px">
                              {{ scope.opt.label }}
                            </q-item-section>
                          </q-item>
                        </template>
                      </q-select>
                      <q-toggle
                        v-model="searchToggleGroup"
                        left-label
                        label="搜索"
                        color="blue"
                        checked-icon="check"
                        unchecked-icon="clear"
                        keep-color
                      />
                      <q-btn
                        flat round dense
                        :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
                        @click="props.toggleFullscreen"
                        class="q-ml-md"
                      />
                    </template>
                    <template v-if="searchToggleGroup" v-slot:top-row="props">
                      <q-tr :props="props">
                        <q-td>
                        </q-td>
                        <q-td v-for="col in props.cols" :key="col.name" class="relative-position">
                          <q-btn color="primary" dense flat icon="search" class="absolute-center" v-if="col.name==='action'" @click="listGet({ pagination: pagination, filter: searchFormGroup })"/>
                          <q-input dense outlined v-model="searchFormGroup[col.name]" v-else/>
                        </q-td>
                      </q-tr>
                    </template>
                    <template v-slot:header="props">
                      <q-tr :props="props">
                        <q-th>
                          <q-checkbox indeterminate-value="some" dense v-model="props.selected" />
                        </q-th>
                        <q-th v-for="col in props.cols" :key="col.name" :props="props">
                          {{ col.label }}
                        </q-th>
                      </q-tr>
                    </template>
                    <template v-slot:body="props">
                      <q-tr :props="props">
                        <q-td width="52">
                          <q-checkbox dense v-model="props.selected" />
                        </q-td>
                        <q-td key="action" :props="props">
                          <q-btn-dropdown
                            color="blue"
                            size="sm"
                            dense
                            menu-anchor="bottom left"
                            menu-self="top left"
                            content-class="text-grey"
                            icon="settings">
                            <q-list dense>
                              <q-item clickable v-close-popup @click="delGroupRow(props.row)">
                                <q-item-section>
                                  <q-item-label>删除</q-item-label>
                                </q-item-section>
                              </q-item>
                            </q-list>
                          </q-btn-dropdown>
                        </q-td>
                        <q-td key="groupCode" :props="props">{{ props.row.groupCode  }}</q-td>
                        <q-td key="groupName" :props="props">{{ props.row.groupName }}</q-td>
                        <q-td key="createTime" :props="props">{{ props.row.createTime }}</q-td>
                      </q-tr>
                      <q-tr v-show="props.expand" :props="props">
                        <q-td colspan="100%">
                        </q-td>
                      </q-tr>
                    </template>
                    <template v-slot:pagination="props">
                      <q-pagination
                        v-model="paginationGroup.page"
                        color="blue"
                        :max-pages="5"
                        :max="pagesGroup"
                        :boundaryLinks="true"
                        :directionLinks="true"
                      />
                      共 {{ totalGroup }} 条
                    </template>
                  </q-table>
                </template>
              </q-splitter>
            </q-tab-panel>
          </q-tab-panels>
        </q-card-section>
      </q-card>
    </div>
    <!-- 新增树节点 -->
    <q-dialog
      v-model="addOrEditDialog"
      persistent
      :maximized="maximizedToggle"
      transition-show="slide-up"
      transition-hide="slide-down">
      <q-card class="bg-white relative-position" style="min-width: 40vw">
        <q-bar class="bg-white q-py-lg">
          <strong>{{ (addOrEdit === 1 ? '新增' : '修改') + (addOrEditLevel === 'company' ? '公司' : (addOrEditLevel === 'dep' ? '部门' : (addOrEditLevel === 'post' ? '岗位' : ''))) }}</strong>
          <q-space />
          <q-btn dense flat icon="minimize" @click="maximizedToggle = false" :disable="!maximizedToggle">
            <q-tooltip v-if="maximizedToggle" content-class="bg-white text-primary">最小化</q-tooltip>
          </q-btn>
          <q-btn dense flat icon="crop_square" @click="maximizedToggle = true" :disable="maximizedToggle">
            <q-tooltip v-if="!maximizedToggle" content-class="bg-white text-primary">最大化</q-tooltip>
          </q-btn>
          <q-btn dense flat icon="close" @click="addOrEditDialog = false">
            <q-tooltip content-class="bg-white text-primary">关闭</q-tooltip>
          </q-btn>
        </q-bar>
        <q-separator />
        <q-card-section v-if="addOrEditLevel === 'company'" :style="maximizedToggle?'margin-bottom:53px;max-height:83.5vh': 'margin-bottom:53px;min-height:50vh;max-height:60vh'" class="scroll">
          <div class="row q-col-gutter-sm">
            <div class="col-12">
              <h-select-table required field-name="公司类型" url="/mdm/company/query" :error="$v.companyForm.name.$error" :value="companyForm.name" @select="companySelectRows"/>
            </div>
            <div class="col-12">
              <div :class="$v.companyForm.code.$error?'text-negative': ''">编码</div>
              <q-input
                v-model="companyForm.code"
                error-message="该字段为必填项"
                :error="$v.companyForm.code.$error"
                @blur="$v.companyForm.code.$touch"
                placeholder="请输入4位数字，如：0001"
                dense hint/>
            </div>
          </div>
        </q-card-section>
        <q-card-section v-if="addOrEditLevel === 'dep'" :style="maximizedToggle?'': 'min-height: 50vh; max-height: 60vh'" :class="[maximizedToggle?'':'scroll']">
          <div class="row q-col-gutter-sm">
            <div class="col-12">
              <h-select-table required field-name="部门类型" url="/mdm/dep/query" :error="$v.depForm.name.$error" :value="depForm.name" @select="depSelectRows"/>
            </div>
            <div class="col-12">
              <div :class="$v.depForm.code.$error?'text-negative': ''">编码</div>
              <q-input
                v-model="depForm.code"
                error-message="该字段为必填项"
                :error="$v.depForm.code.$error"
                @blur="$v.depForm.code.$touch"
                placeholder="请输入4位数字，如：0001"
                dense hint/>
            </div>
          </div>
        </q-card-section>
        <q-card-section v-if="addOrEditLevel === 'post'" :style="maximizedToggle?'': 'min-height: 50vh; max-height: 60vh'" :class="[maximizedToggle?'':'scroll']">
          <div class="row q-col-gutter-sm">
            <div class="col-12">
              <h-select-table required field-name="岗位类型" url="/mdm/station/query" :error="$v.postForm.name.$error" :value="postForm.name" @select="postSelectRows"/>
            </div>
            <div class="col-12">
              <div :class="$v.postForm.code.$error?'text-negative': ''">编码</div>
              <q-input
                v-model="postForm.code"
                error-message="该字段为必填项"
                :error="$v.postForm.code.$error"
                @blur="$v.postForm.code.$touch"
                placeholder="请输入4位数字，如：0001"
                dense hint/>
            </div>
          </div>
        </q-card-section>
        <q-separator class="absolute" style="bottom: 52px; left: 0"/>
        <q-card-actions align="right" class="absolute-bottom bg-white">
          <q-btn flat label="取消" color="primary" v-close-popup />
          <q-btn flat label="保存" color="primary" :loading="loadingSave" @click="saveHandler" />
        </q-card-actions>
      </q-card>
    </q-dialog>
    <!-- <q-dialog
      v-model="addOrEditDialog"
      persistent
      :maximized="maximizedToggle"
      transition-show="slide-up"
      transition-hide="slide-down">
      <q-card class="bg-white relative-position" style="min-width: 40vw">
        <q-bar class="bg-white q-py-lg">
          <strong>{{ (addOrEdit === 1 ? '新增' : '修改') + (addOrEditLevel === 'company' ? '公司' : (addOrEditLevel === 'dep' ? '部门' : (addOrEditLevel === 'post' ? '岗位' : ''))) }}</strong>
          <q-space />
          <q-btn dense flat icon="minimize" @click="maximizedToggle = false" :disable="!maximizedToggle">
            <q-tooltip v-if="maximizedToggle" content-class="bg-white text-primary">最小化</q-tooltip>
          </q-btn>
          <q-btn dense flat icon="crop_square" @click="maximizedToggle = true" :disable="maximizedToggle">
            <q-tooltip v-if="!maximizedToggle" content-class="bg-white text-primary">最大化</q-tooltip>
          </q-btn>
          <q-btn dense flat icon="close" @click="addOrEditDialog = false">
            <q-tooltip content-class="bg-white text-primary">关闭</q-tooltip>
          </q-btn>
        </q-bar>
        <q-separator />
        <q-card-section v-if="addOrEditLevel === 'company'" :style="maximizedToggle?'margin-bottom:53px;max-height:83.5vh': 'margin-bottom:53px;min-height:50vh;max-height:60vh'" class="scroll">
          <div class="row q-col-gutter-sm">
            <div class="col-12">
              <div :class="$v.companyForm.code.$error?'text-negative': ''">公司编码</div>
              <q-input
                v-model="companyForm.code"
                error-message="该字段为必填项"
                :error="$v.companyForm.code.$error"
                @blur="$v.companyForm.code.$touch"
                placeholder="请输入4位数字，如：0001"
                dense hint/>
            </div>
            <div class="col-12">
              <div :class="$v.companyForm.name.$error?'text-negative': ''">公司名称</div>
              <q-input
                v-model="companyForm.name"
                error-message="该字段为必填项"
                :error="$v.companyForm.name.$error"
                @blur="$v.companyForm.name.$touch"
                dense hint/>
            </div>
          </div>
        </q-card-section>
        <q-card-section v-if="addOrEditLevel === 'dep'" :style="maximizedToggle?'': 'min-height: 50vh; max-height: 60vh'" :class="[maximizedToggle?'':'scroll']">
          <div class="row q-col-gutter-sm">
            <div class="col-12">
              <div :class="$v.depForm.code.$error?'text-negative': ''">部门编码</div>
              <q-input
                v-model="depForm.code"
                error-message="该字段为必填项"
                :error="$v.depForm.code.$error"
                @blur="$v.depForm.code.$touch"
                placeholder="请输入4位数字，如：0001"
                dense hint/>
            </div>
            <div class="col-12">
              <div :class="$v.depForm.name.$error?'text-negative': ''">部门名称</div>
              <q-input
                v-model="depForm.name"
                error-message="该字段为必填项"
                :error="$v.depForm.name.$error"
                @blur="$v.depForm.name.$touch"
                dense hint/>
            </div>
          </div>
        </q-card-section>
        <q-card-section v-if="addOrEditLevel === 'post'" :style="maximizedToggle?'': 'min-height: 50vh; max-height: 60vh'" :class="[maximizedToggle?'':'scroll']">
          <div class="row q-col-gutter-sm">
            <div class="col-12">
              <div :class="$v.postForm.code.$error?'text-negative': ''">岗位编码</div>
              <q-input
                v-model="postForm.code"
                error-message="该字段为必填项"
                :error="$v.postForm.code.$error"
                @blur="$v.postForm.code.$touch"
                placeholder="请输入4位数字，如：0001"
                dense hint/>
            </div>
            <div class="col-12">
              <div :class="$v.postForm.name.$error?'text-negative': ''">岗位名称</div>
              <q-input
                v-model="postForm.name"
                error-message="该字段为必填项"
                :error="$v.postForm.name.$error"
                @blur="$v.postForm.name.$touch"
                dense hint/>
            </div>
          </div>
        </q-card-section>
        <q-separator class="absolute" style="bottom: 52px; left: 0"/>
        <q-card-actions align="right" class="absolute-bottom bg-white">
          <q-btn flat label="取消" color="primary" v-close-popup />
          <q-btn flat label="保存" color="primary" :loading="loadingSave" @click="saveHandler" />
        </q-card-actions>
      </q-card>
    </q-dialog> -->
    <!-- 分配地点 -->
    <q-dialog
      v-model="siteAddDialog"
      persistent
      :maximized="maximizedToggle"
      transition-show="slide-up"
      transition-hide="slide-down">
      <q-card class="bg-white relative-position" style="min-width: 40vw">
        <q-bar class="bg-white q-py-lg">
          <strong>分配</strong>
          <q-space />
          <q-btn dense flat icon="minimize" @click="maximizedToggle = false" :disable="!maximizedToggle">
            <q-tooltip v-if="maximizedToggle" content-class="bg-white text-primary">最小化</q-tooltip>
          </q-btn>
          <q-btn dense flat icon="crop_square" @click="maximizedToggle = true" :disable="maximizedToggle">
            <q-tooltip v-if="!maximizedToggle" content-class="bg-white text-primary">最大化</q-tooltip>
          </q-btn>
          <q-btn dense flat icon="close" @click="siteAddDialog = false">
            <q-tooltip content-class="bg-white text-primary">关闭</q-tooltip>
          </q-btn>
        </q-bar>
        <q-separator />
        <q-card-section :style="maximizedToggle?'margin-bottom:53px;max-height:83.5vh': 'margin-bottom:53px;min-height:50vh;max-height:60vh'" class="scroll">
          <div class="row q-col-gutter-sm">
            <div class="col-12">
              <h-select-table emit-value required selection="multiple" field-name="地点名称" url="/mdm/site/queryEnableSet" :error="$v.siteForm.siteIds.$error" :value="siteForm.siteIds" @select="selectRowsHandler"/>
            </div>
          </div>
        </q-card-section>
        <q-separator class="absolute" style="bottom: 52px; left: 0"/>
        <q-card-actions align="right" class="absolute-bottom bg-white">
          <q-btn flat label="取消" color="primary" v-close-popup />
          <q-btn flat label="保存" color="primary" :loading="loadingSave" @click="saveSiteAddHandler" />
        </q-card-actions>
      </q-card>
    </q-dialog>
    <!-- 分配角色 -->
    <q-dialog
      v-model="roleAddDialog"
      persistent
      :maximized="maximizedToggle"
      transition-show="slide-up"
      transition-hide="slide-down">
      <q-card class="bg-white relative-position" style="min-width: 40vw">
        <q-bar class="bg-white q-py-lg">
          <strong>分配</strong>
          <q-space />
          <q-btn dense flat icon="minimize" @click="maximizedToggle = false" :disable="!maximizedToggle">
            <q-tooltip v-if="maximizedToggle" content-class="bg-white text-primary">最小化</q-tooltip>
          </q-btn>
          <q-btn dense flat icon="crop_square" @click="maximizedToggle = true" :disable="maximizedToggle">
            <q-tooltip v-if="!maximizedToggle" content-class="bg-white text-primary">最大化</q-tooltip>
          </q-btn>
          <q-btn dense flat icon="close" @click="roleAddDialog = false">
            <q-tooltip content-class="bg-white text-primary">关闭</q-tooltip>
          </q-btn>
        </q-bar>
        <q-separator />
        <q-card-section :style="maximizedToggle?'margin-bottom:53px;max-height:83.5vh': 'margin-bottom:53px;min-height:50vh;max-height:60vh'" class="scroll">
          <div class="row q-col-gutter-sm">
            <div class="col-12">
              <h-select-table emit-value required selection="multiple" field-name="角色名称" url="/mdm/role/query" :error="$v.roleForm.roleIds.$error" :value="roleForm.roleIds" @select="selectRoleRowsHandler"/>
            </div>
          </div>
        </q-card-section>
        <q-separator class="absolute" style="bottom: 52px; left: 0"/>
        <q-card-actions align="right" class="absolute-bottom bg-white">
          <q-btn flat label="取消" color="primary" v-close-popup />
          <q-btn flat label="保存" color="primary" :loading="loadingSave" @click="saveRoleAddHandler" />
        </q-card-actions>
      </q-card>
    </q-dialog>
    <!-- 岗位分配业务组 -->
    <q-dialog
      v-model="groupAddDialog"
      persistent
      :maximized="maximizedToggle"
      transition-show="slide-up"
      transition-hide="slide-down">
      <q-card class="bg-white relative-position" style="min-width: 40vw">
        <q-bar class="bg-white q-py-lg">
          <strong>分配</strong>
          <q-space />
          <q-btn dense flat icon="minimize" @click="maximizedToggle = false" :disable="!maximizedToggle">
            <q-tooltip v-if="maximizedToggle" content-class="bg-white text-primary">最小化</q-tooltip>
          </q-btn>
          <q-btn dense flat icon="crop_square" @click="maximizedToggle = true" :disable="maximizedToggle">
            <q-tooltip v-if="!maximizedToggle" content-class="bg-white text-primary">最大化</q-tooltip>
          </q-btn>
          <q-btn dense flat icon="close" @click="groupAddDialog = false">
            <q-tooltip content-class="bg-white text-primary">关闭</q-tooltip>
          </q-btn>
        </q-bar>
        <q-separator />
        <q-card-section :style="maximizedToggle?'margin-bottom:53px;max-height:83.5vh': 'margin-bottom:53px;min-height:50vh;max-height:60vh'" class="scroll">
          <div class="row q-col-gutter-sm">
            <div class="col-12">
              <h-select-table emit-value required selection="multiple" field-name="业务组名称" url="/mdm/businessGroup/queryOrgEnable" :query="queryParams" :error="$v.groupForm.businessIds.$error" :value="groupForm.businessIds" @select="selectGroupRowsHandler"/>
            </div>
          </div>
        </q-card-section>
        <q-separator class="absolute" style="bottom: 52px; left: 0"/>
        <q-card-actions align="right" class="absolute-bottom bg-white">
          <q-btn flat label="取消" color="primary" v-close-popup />
          <q-btn flat label="保存" color="primary" :loading="loadingSave" @click="saveGroupAddHandler" />
        </q-card-actions>
      </q-card>
    </q-dialog>
    <!-- 岗位分配用户 -->
    <q-dialog
      v-model="userAddDialog"
      persistent
      :maximized="maximizedToggle"
      transition-show="slide-up"
      transition-hide="slide-down">
      <q-card class="bg-white relative-position" style="min-width: 40vw">
        <q-bar class="bg-white q-py-lg">
          <strong>分配</strong>
          <q-space />
          <q-btn dense flat icon="minimize" @click="maximizedToggle = false" :disable="!maximizedToggle">
            <q-tooltip v-if="maximizedToggle" content-class="bg-white text-primary">最小化</q-tooltip>
          </q-btn>
          <q-btn dense flat icon="crop_square" @click="maximizedToggle = true" :disable="maximizedToggle">
            <q-tooltip v-if="!maximizedToggle" content-class="bg-white text-primary">最大化</q-tooltip>
          </q-btn>
          <q-btn dense flat icon="close" @click="userAddDialog = false">
            <q-tooltip content-class="bg-white text-primary">关闭</q-tooltip>
          </q-btn>
        </q-bar>
        <q-separator />
        <q-card-section :style="maximizedToggle?'margin-bottom:53px;max-height:83.5vh': 'margin-bottom:53px;min-height:50vh;max-height:60vh'" class="scroll">
          <div class="row q-col-gutter-sm">
            <div class="col-12">
              <h-select-table emit-value required selection="multiple" :columns="columnsUserStation" label-field="loginName" field-name="用户名称" url="/mdm/user/query" :error="$v.userForm.userIds.$error" :value="userForm.userIds" @select="selectUserRowsHandler"/>
            </div>
          </div>
        </q-card-section>
        <q-separator class="absolute" style="bottom: 52px; left: 0"/>
        <q-card-actions align="right" class="absolute-bottom bg-white">
          <q-btn flat label="取消" color="primary" v-close-popup />
          <q-btn flat label="保存" color="primary" :loading="loadingSave" @click="saveUserAddHandler" />
        </q-card-actions>
      </q-card>
    </q-dialog>
    <!-- 部门分配业务组 -->
    <q-dialog
      v-model="depGroupAddDialog"
      persistent
      :maximized="maximizedToggle"
      transition-show="slide-up"
      transition-hide="slide-down">
      <q-card class="bg-white relative-position" style="min-width: 40vw">
        <q-bar class="bg-white q-py-lg">
          <strong>分配</strong>
          <q-space />
          <q-btn dense flat icon="minimize" @click="maximizedToggle = false" :disable="!maximizedToggle">
            <q-tooltip v-if="maximizedToggle" content-class="bg-white text-primary">最小化</q-tooltip>
          </q-btn>
          <q-btn dense flat icon="crop_square" @click="maximizedToggle = true" :disable="maximizedToggle">
            <q-tooltip v-if="!maximizedToggle" content-class="bg-white text-primary">最大化</q-tooltip>
          </q-btn>
          <q-btn dense flat icon="close" @click="depGroupAddDialog = false">
            <q-tooltip content-class="bg-white text-primary">关闭</q-tooltip>
          </q-btn>
        </q-bar>
        <q-separator />
        <q-card-section :style="maximizedToggle?'margin-bottom:53px;max-height:83.5vh': 'margin-bottom:53px;min-height:50vh;max-height:60vh'" class="scroll">
          <div class="row q-col-gutter-sm">
            <div class="col-12">
              <h-select-table emit-value required selection="multiple" field-name="业务组名称" url="/mdm/businessGroup/queryOrgEnable" :query="queryParams" :error="$v.depGroupForm.businessIds.$error" :value="depGroupForm.businessIds" @select="selectDepGroupRowsHandler"/>
            </div>
          </div>
        </q-card-section>
        <q-separator class="absolute" style="bottom: 52px; left: 0"/>
        <q-card-actions align="right" class="absolute-bottom bg-white">
          <q-btn flat label="取消" color="primary" v-close-popup />
          <q-btn flat label="保存" color="primary" :loading="loadingSave" @click="saveDepGroupAddHandler" />
        </q-card-actions>
      </q-card>
    </q-dialog>
    <!-- 公司分配业务组织 -->
    <q-dialog
      v-model="borgAddDialog"
      persistent
      :maximized="maximizedToggle"
      transition-show="slide-up"
      transition-hide="slide-down">
      <q-card class="bg-white relative-position" style="min-width: 40vw">
        <q-bar class="bg-white q-py-lg">
          <strong>分配</strong>
          <q-space />
          <q-btn dense flat icon="minimize" @click="maximizedToggle = false" :disable="!maximizedToggle">
            <q-tooltip v-if="maximizedToggle" content-class="bg-white text-primary">最小化</q-tooltip>
          </q-btn>
          <q-btn dense flat icon="crop_square" @click="maximizedToggle = true" :disable="maximizedToggle">
            <q-tooltip v-if="!maximizedToggle" content-class="bg-white text-primary">最大化</q-tooltip>
          </q-btn>
          <q-btn dense flat icon="close" @click="borgAddDialog = false">
            <q-tooltip content-class="bg-white text-primary">关闭</q-tooltip>
          </q-btn>
        </q-bar>
        <q-separator />
        <q-card-section :style="maximizedToggle?'margin-bottom:53px;max-height:83.5vh': 'margin-bottom:53px;min-height:50vh;max-height:60vh'" class="scroll">
          <div class="row q-col-gutter-sm">
            <div class="col-12">
              <h-select-table emit-value required selection="multiple" field-name="业务组织名称" url="/mdm/businessOrg/query" :query="queryParams" :error="$v.borgForm.borgIds.$error" :value="borgForm.borgIds" @select="selectBorgRowsHandler"/>
            </div>
          </div>
        </q-card-section>
        <q-separator class="absolute" style="bottom: 52px; left: 0"/>
        <q-card-actions align="right" class="absolute-bottom bg-white">
          <q-btn flat label="取消" color="primary" v-close-popup />
          <q-btn flat label="保存" color="primary" :loading="loadingSave" @click="saveBorgAddHandler" />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>

<script>
import { required } from 'vuelidate/lib/validators'
import HSelectTable from 'components/Common/HSelectTable'
import { transformToTreeFormat } from 'src/utils/fns'
export default {
  name: 'Organizational',
  components: {
    HSelectTable
  },
  data () {
    return {
      // 左侧 tree
      nodes: [],
      nodeSelected: '',
      nodeExpanded: [],
      nodeHeader: '',
      nodeSelectedHeader: 'root',
      // dialog
      addOrEditDialog: false,
      addOrEdit: 1,
      addOrEditLevel: 'company',
      loadingSave: false,
      addParentId: '',
      editNodeId: '',
      companyForm: {
        code: '',
        name: ''
      },
      depForm: {
        code: '',
        name: ''
      },
      postForm: {
        code: '',
        name: ''
      },
      maximizedToggle: false,
      // 右侧
      companyTabs: 'tab1',
      companySecondTabs: '',
      // site
      visibleColumnsSite: [
        'action',
        'siteName',
        'siteCode',
        'createTime'
      ],
      columnsSite: [
        { name: 'action', align: 'center', label: '操作' },
        { name: 'siteCode', required: true, label: '地点编码', align: 'left', field: 'siteCode', sortable: true },
        { name: 'siteName', required: true, label: '地点名称', align: 'left', field: 'siteName', sortable: true },
        { name: 'createTime', field: 'createTime', align: 'left', label: '创建时间', sortable: true }
      ],
      dataSite: [],
      totalSite: 0,
      paginationSite: {
        page: 1,
        rowsPerPage: 10,
        rowsNumber: 10,
        sortBy: '',
        descending: Boolean
      },
      searchToggleSite: false,
      searchFormSite: {
        siteName: '',
        siteCode: '',
        createTime: ''
      },
      selectedSite: [],
      // role
      postTabs: 'tab1',
      visibleColumnsRole: [
        'action',
        'roleName',
        'roleCode',
        'createTime'
      ],
      columnsRole: [
        { name: 'action', align: 'center', label: '操作' },
        { name: 'roleCode', required: true, label: '角色编码', align: 'left', field: 'roleCode', sortable: true },
        { name: 'roleName', required: true, label: '角色名称', align: 'left', field: 'roleName', sortable: true },
        { name: 'createTime', field: 'createTime', align: 'left', label: '创建时间', sortable: true }
      ],
      dataRole: [],
      totalRole: 0,
      paginationRole: {
        page: 1,
        rowsPerPage: 10,
        rowsNumber: 10,
        sortBy: '',
        descending: Boolean
      },
      searchToggleRole: false,
      searchFormRole: {
        roleName: '',
        roleCode: '',
        createTime: ''
      },
      selectedRole: [],
      // user
      visibleColumnsUser: [
        'action',
        'loginName',
        'email',
        'createTime'
      ],
      columnsUser: [
        { name: 'action', align: 'center', label: '操作' },
        { name: 'loginName', required: true, label: '账户', align: 'left', field: 'loginName', sortable: true },
        { name: 'email', required: true, label: '邮箱地址', align: 'left', field: 'email', sortable: true },
        { name: 'createTime', field: 'createTime', align: 'left', label: '创建时间', sortable: true }
      ],
      dataUser: [],
      totalUser: 0,
      paginationUser: {
        page: 1,
        rowsPerPage: 10,
        rowsNumber: 10,
        sortBy: '',
        descending: Boolean
      },
      searchToggleUser: false,
      searchFormUser: {
        loginName: '',
        email: '',
        createTime: ''
      },
      selectedUser: [],
      // group
      postSecondTabs: '',
      tabsList: [],
      visibleColumnsGroup: [
        'action',
        'groupName',
        'groupCode',
        'createTime'
      ],
      columnsGroup: [
        { name: 'action', align: 'center', label: '操作' },
        { name: 'groupCode', required: true, label: '编码', align: 'left', field: 'groupCode', sortable: true },
        { name: 'groupName', required: true, label: '名称', align: 'left', field: 'groupName', sortable: true },
        { name: 'createTime', field: 'createTime', align: 'left', label: '创建时间', sortable: true }
      ],
      dataGroup: [],
      totalGroup: 0,
      paginationGroup: {
        page: 1,
        rowsPerPage: 10,
        rowsNumber: 10,
        sortBy: '',
        descending: Boolean
      },
      searchToggleGroup: false,
      searchFormGroup: {
        groupName: '',
        groupCode: '',
        createTime: ''
      },
      selectedGroup: [],
      // borg
      visibleColumnsBorg: [
        'action',
        'borgName',
        'borgCode',
        'createTime'
      ],
      columnsBorg: [
        { name: 'action', align: 'center', label: '操作' },
        { name: 'borgCode', required: true, label: '编码', align: 'left', field: 'borgCode', sortable: true },
        { name: 'borgName', required: true, label: '名称', align: 'left', field: 'borgName', sortable: true },
        { name: 'createTime', field: 'createTime', align: 'left', label: '创建时间', sortable: true }
      ],
      dataBorg: [],
      totalBorg: 0,
      paginationBorg: {
        page: 1,
        rowsPerPage: 10,
        rowsNumber: 10,
        sortBy: '',
        descending: Boolean
      },
      searchToggleBorg: false,
      searchFormBorg: {
        borgName: '',
        borgCode: '',
        createTime: ''
      },
      selectedBorg: [],
      // dep
      depTabs: 'tab1',
      depSecondTabs: '200',
      splitterModel: 10,
      visibleColumnsDep: [
        'action',
        'groupName',
        'groupCode',
        'createTime'
      ],
      columnsDep: [
        { name: 'action', align: 'center', label: '操作' },
        { name: 'groupCode', required: true, label: '编码', align: 'left', field: 'groupCode', sortable: true },
        { name: 'groupName', required: true, label: '名称', align: 'left', field: 'groupName', sortable: true },
        { name: 'createTime', field: 'createTime', align: 'left', label: '创建时间', sortable: true }
      ],
      dataDep: [],
      totalDep: 0,
      paginationDep: {
        page: 1,
        rowsPerPage: 10,
        rowsNumber: 10,
        sortBy: '',
        descending: Boolean
      },
      searchToggleDep: false,
      searchFormDep: {
        groupName: '',
        groupCode: '',
        createTime: ''
      },
      selectedDep: [],
      depGroupAddDialog: false,
      depGroupForm: {
        businessIds: ''
      },
      queryParams: {},
      // 右侧dialog
      // site
      siteForm: {
        siteIds: ''
      },
      siteAddDialog: false,
      // role
      roleForm: {
        roleIds: ''
      },
      roleAddDialog: false,
      // user
      columnsUserStation: [
        { name: 'loginName', required: true, label: '账户', align: 'left', field: 'loginName', sortable: true },
        { name: 'email', required: true, label: '邮箱地址', align: 'left', field: 'email', sortable: true },
        { name: 'createTime', field: 'createTime', align: 'left', label: '创建时间', sortable: true }
      ],
      userForm: {
        userIds: ''
      },
      userAddDialog: false,
      // group
      groupForm: {
        businessIds: ''
      },
      // borg
      borgAddDialog: false,
      borgForm: {
        borgIds: ''
      },
      groupAddDialog: false,
      // 右侧 部门品类 tree
      nodesCat: [],
      treeFilter: '',
      nodeSelectedCat: '',
      nodeExpandedCat: [],
      nodeTickedCat: [],
      // 右侧 岗位品类 tree
      nodesPostCat: [],
      treePostFilter: '',
      nodeSelectedPostCat: '',
      nodeExpandedPostCat: [],
      nodeTickedPostCat: [],
      // 各种options
      options: []
    }
  },
  computed: {
    pagesSite () {
      return Math.ceil(this.totalSite / this.paginationSite.rowsPerPage)
    },
    pagesRole () {
      return Math.ceil(this.totalRole / this.paginationRole.rowsPerPage)
    },
    pagesUser () {
      return Math.ceil(this.totalUser / this.paginationUser.rowsPerPage)
    },
    pagesGroup () {
      return Math.ceil(this.totalGroup / this.paginationGroup.rowsPerPage)
    },
    pagesBorg () {
      return Math.ceil(this.totalBorg / this.paginationBorg.rowsPerPage)
    },
    pagesDep () {
      return Math.ceil(this.totalDep / this.paginationDep.rowsPerPage)
    },
    isNodeSelected () {
      return !!this.nodeSelected
    },
    windowHeight () {
      return window.innerHeight - 110 + 'px'
    }
  },
  watch: {
    'paginationSite.page' () {
      this.nodeSelectedHandler(this.nodeSelected)
    },
    'paginationRole.page' () {
      this.nodeSelectedHandler(this.nodeSelected)
    },
    'paginationUser.page' () {
      this.nodeSelectedHandler(this.nodeSelected)
    },
    'paginationGroup.page' () {
      this.nodeSelectedHandler(this.nodeSelected)
    },
    'paginationBorg.page' () {
      this.nodeSelectedHandler(this.nodeSelected)
    },
    'paginationDep.page' () {
      this.tableDataGetDep({
        pagination: this.paginationDep,
        filter: this.searchFormDep
      })
    },
    postSecondTabs () {
      this.tableDataGet({
        pagination: this.paginationGroup,
        filter: this.searchFormGroup
      })
    },
    companySecondTabs () {
      this.nodeHeader = 'Borg'
      this.tableDataGet({
        pagination: this.paginationBorg,
        filter: this.searchFormBorg
      })
    }
  },
  validations: {
    companyForm: {
      code: { required },
      name: { required }
    },
    depForm: {
      code: { required },
      name: { required }
    },
    postForm: {
      code: { required },
      name: { required }
    },
    siteForm: {
      siteIds: { required }
    },
    roleForm: {
      roleIds: { required }
    },
    userForm: {
      userIds: { required }
    },
    groupForm: {
      businessIds: { required }
    },
    borgForm: {
      borgIds: { required }
    },
    depGroupForm: {
      businessIds: { required }
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    async init () {
      this.borgTypeGet()
      await this.nodesGet()
      await this.nodeSelectedHandler(this.nodeSelected)
    },
    async nodesGet () {
      await this.$api({
        method: 'post',
        url: '/mdm/org/queryTree',
        useLoadLayer: true,
        successCallback: ({ data }) => {
          let arr = []
          data.map(item => {
            arr.push(item.id)
            if (item.itemList && item.itemList.length > 0) {
              item.itemList.map(item2 => {
                arr.push(item2.id)
              })
            }
          })
          this.nodeExpanded = arr
          this.nodes = this.nodesRecursive(data)
          if (this.nodes.length > 0) {
            this.nodeSelected = this.nodes[0].id
          }
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
    },
    async addChild (level, node) {
      this.addOrEdit = 1
      this.addOrEditLevel = level
      this.addParentId = node.id
      if (level === 'company') {
        this.companyForm = {
          code: '',
          name: ''
        }
        this.$v.companyForm.$reset()
      }
      if (level === 'dep') {
        this.depForm = {
          code: '',
          name: ''
        }
        this.$v.depForm.$reset()
      }
      if (level === 'post') {
        this.postForm = {
          code: '',
          name: ''
        }
        this.$v.postForm.$reset()
      }
      this.addOrEditDialog = true
    },
    companySelectRows (arr, isError) {
      this.companyForm.name = arr[0].name
    },
    depSelectRows (arr, isError) {
      this.depForm.name = arr[0].name
    },
    postSelectRows (arr, isError) {
      this.postForm.name = arr[0].name
    },
    saveHandler () {
      let url = this.addOrEdit === 1 ? '/mdm/org/add' : '/mdm/org/update'
      let currentForm = null
      if (this.addOrEditLevel === 'company') {
        this.$v.companyForm.$touch()
        if (this.$v.companyForm.$error) {
          return false
        }
        currentForm = this.companyForm
      }
      if (this.addOrEditLevel === 'dep') {
        this.$v.depForm.$touch()
        if (this.$v.depForm.$error) {
          return false
        }
        currentForm = this.depForm
      }
      if (this.addOrEditLevel === 'post') {
        this.$v.postForm.$touch()
        if (this.$v.postForm.$error) {
          return false
        }
        currentForm = this.postForm
      }
      this.$api({
        method: 'put',
        url: url,
        params: {
          ...currentForm,
          parentId: this.addOrEdit === 1 ? this.addParentId : null,
          id: this.addOrEdit === 2 ? this.editNodeId : null,
          type: this.addOrEditLevel === 'company' ? 1 : this.addOrEditLevel === 'dep' ? 2 : 3
        },
        emulateJSON: true,
        useNotify: true,
        successCallback: ({ data }) => {
          this.addOrEditDialog = false
          this.init()
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
    },
    delNode (node) {
      this.$q.dialog({
        title: '删除',
        message: `确认要删除节点：${node.name} 吗？`,
        ok: true,
        cancel: true,
        persistent: true
      }).onOk(async () => {
        await this.$api({
          method: 'delete',
          url: `/mdm/org/delete/${node.id}`,
          useLoadLayer: true,
          useNotify: true,
          successCallback: ({ data }) => {
            this.init()
          },
          errorCallback (err) {
            console.log('未处理的业务级error：', err)
          }
        })
      }).onCancel(() => {

      })
    },
    nodesRecursive (nodes) {
      nodes.map(item => {
        if (item.parentId === '0' && item.type === 1) {
          item.header = 'root'
        } else if (item.type === 1) {
          item.header = 'company'
        } else if (item.type === 2) {
          item.header = 'dep'
        } else if (item.type === 3) {
          item.header = 'post'
        } else if (item.type === 4) {
          item.header = 'site'
        } else if (item.type === 5) {
          item.header = 'location'
        } else {
        }
        if (item.itemList && item.itemList.length > 0) {
          item.children = item.itemList
          delete item.itemList
          this.nodesRecursive(item.children)
        }
      })
      return nodes
    },
    async nodeSelectedHandler (nodeKey) {
      if (nodeKey) {
        let node = this.$refs['orgTree'].getNodeByKey(nodeKey)
        this.nodeSelectedHeader = node.header
        switch (this.nodeSelectedHeader) {
          case 'root':
            switch (this.companyTabs) {
              case 'tab1':
                this.nodeHeader = 'Site'
                this.tableDataGet({
                  pagination: this.paginationSite,
                  filter: this.searchFormSite
                })
                break
              case 'tab2':
                this.nodeHeader = 'Borg'
                await this.borgTypeGet()
                await this.tableDataGet({
                  pagination: this.paginationBorg,
                  filter: this.searchFormBorg
                })
            }
            break
          case 'company':
            switch (this.companyTabs) {
              case 'tab1':
                this.nodeHeader = 'Site'
                this.tableDataGet({
                  pagination: this.paginationSite,
                  filter: this.searchFormSite
                })
                break
              case 'tab2':
                this.nodeHeader = 'Borg'
                await this.borgTypeGet()
                await this.tableDataGet({
                  pagination: this.paginationBorg,
                  filter: this.searchFormBorg
                })
            }
            break
          case 'dep':
            // this.nodeHeader = 'Dep'
            this.tableDataGetDep({
              pagination: this.paginationDep,
              filter: this.searchFormDep
            })
            break
          case 'post':
            switch (this.postTabs) {
              case 'tab1':
                this.nodeHeader = 'Role'
                // this.postTabs = 'tab1'
                this.tableDataGet({
                  pagination: this.paginationRole,
                  filter: this.searchFormRole
                })
                break
              case 'tab2':
                this.nodeHeader = 'User'
                // this.postTabs = 'tab1'
                this.tableDataGet({
                  pagination: this.paginationUser,
                  filter: this.searchFormUser
                })
                break
              case 'tab3':
                this.nodeHeader = 'Group'
                await this.groupTypeGet()
                await this.tableDataGet({
                  pagination: this.paginationGroup,
                  filter: this.searchFormGroup
                })
                break
              default:
                break
            }
            break
          default:
            break
        }
      }
    },
    async tableDataGet (props) {
      let { page, rowsPerPage, sortBy, descending } = props.pagination, filter = props.filter
      let otherQueryArgs = {}, url = ''
      switch (this.nodeHeader) {
        case 'Site':
          otherQueryArgs = { companyId: this.nodeSelected }
          url = '/mdm/companysite/query'
          break
        case 'User':
          otherQueryArgs = { stationId: this.nodeSelected }
          url = '/mdm/userpermission/queryUser'
          break
        case 'Role':
          otherQueryArgs = { stationId: this.nodeSelected }
          url = '/mdm/rolestation/query'
          break
        case 'Group':
          otherQueryArgs = { stationId: this.nodeSelected, typeCode: this.postSecondTabs }
          url = '/mdm/groupstation/query'
          break
        case 'Borg':
          otherQueryArgs = { companyId: this.nodeSelected, typeCode: this.companySecondTabs }
          url = '/mdm/companyborg/query'
          break
        default:
          break
      }
      await this.$api({
        method: 'post',
        url: url,
        params: {
          pageNo: page,
          pageSize: rowsPerPage,
          sort: sortBy,
          order: descending === true ? 'desc' : (descending === false ? 'asc' : ''),
          ...filter,
          ...otherQueryArgs
        },
        emulateJSON: true,
        useLoadLayer: true,
        successCallback: ({ data }) => {
          this[`total${this.nodeHeader}`] = data.total
          this[`data${this.nodeHeader}`] = data.list
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
      this[`pagination${this.nodeHeader}`].page = page
      this[`pagination${this.nodeHeader}`].rowsPerPage = rowsPerPage
      this[`pagination${this.nodeHeader}`].sortBy = sortBy
      this[`pagination${this.nodeHeader}`].descending = descending
    },
    async tableDataGetDep (props) {
      let { page, rowsPerPage, sortBy, descending } = props.pagination, filter = props.filter
      await this.$api({
        method: 'post',
        url: 'mdm/groupdep/query',
        params: {
          pageNo: page,
          pageSize: rowsPerPage,
          sort: sortBy,
          order: descending === true ? 'desc' : (descending === false ? 'asc' : ''),
          ...filter,
          depId: this.nodeSelected,
          typeCode: '200'
        },
        emulateJSON: true,
        useLoadLayer: true,
        successCallback: ({ data }) => {
          this.totalDep = data.total
          this.dataDep = data.list
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
      this.paginationDep.page = page
      this.paginationDep.rowsPerPage = rowsPerPage
      this.paginationDep.sortBy = sortBy
      this.paginationDep.descending = descending
    },
    // 分配地点
    addSite () {
      this.siteForm = {
        siteIds: ''
      }
      this.$v.siteForm.$reset()
      this.siteAddDialog = true
    },
    selectRowsHandler (arr, isError) {
      this.siteForm.siteIds = arr.join(',')
    },
    saveSiteAddHandler () {
      this.$v.siteForm.$touch()
      if (!this.$v.siteForm.$error) {
        this.loadingSave = true
        this.$api({
          method: 'put',
          url: `/mdm/companysite/addCompanySite/${this.nodeSelected}`,
          params: this.siteForm,
          emulateJSON: true,
          useNotify: true,
          successCallback: ({ data }) => {
            this.siteAddDialog = false
            this.loadingSave = false
            this.nodeSelectedHandler(this.nodeSelected)
            this.init()
          },
          errorCallback (err) {
            console.log('未处理的业务级error：', err)
          }
        })
      }
    },
    delSiteRow (row) {
      this.$q.dialog({
        title: '删除',
        message: `确认要删除地点：${row.siteName} 吗？`,
        ok: true,
        cancel: true,
        persistent: true
      }).onOk(async () => {
        await this.$api({
          method: 'delete',
          url: `/mdm/companysite/delete/${row.id}`,
          useLoadLayer: true,
          useNotify: true,
          successCallback: ({ data }) => {
            this.nodeSelectedHandler(this.nodeSelected)
            this.init()
          },
          errorCallback (err) {
            console.log('未处理的业务级error：', err)
          }
        })
      }).onCancel(() => {

      })
    },
    // 部门下品类nodes数据获取
    async nodesCatGet (node) {
      await this.$api({
        method: 'post',
        url: '/mdm/orgapplycategory/query',
        params: {
          idPam: node.id,
          parentIdPam: node.parentId
        },
        emulateJSON: true,
        useLoadLayer: true,
        successCallback: ({ data }) => {
          let pHeader = this.$refs['orgTree'].getNodeByKey(node.parentId).header
          if (pHeader === 'company' || pHeader === 'root') {
            data.map(item => {
              item.disabled = false
            })
          }
          this.nodeTickedCat = []
          data.map(item => {
            if (item.selectFlag !== null) {
              this.nodeTickedCat.push(item.id)
            }
            item.disabled = item.controlFlag === null
          })
          let nodesCat = transformToTreeFormat(data, 'id', 'parentId', 'children')
          // if (pHeader === 'dep') {
          //   nodesCat[0].disabled = false
          //   nodesCat[0].children = this.nodesCatRecursive(nodesCat[0].children)
          // }
          this.nodesCat = nodesCat
          let arr = []
          this.nodesCat.map(item => {
            arr.push(item.id)
            if (item.children && item.children.length > 0) {
              item.children.map(item2 => {
                arr.push(item2.id)
              })
            }
          })
          this.nodeExpandedCat = arr
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
    },
    nodesCatRecursive (nodes) {
      nodes.map(item => {
        item.disabled = item.controlFlag === null
        if (item.children) {
          item.children.map(child => {
            if (child.disabled === false) {
              item.disabled = false
            } else {
              item.disabled = true
            }
          })
        }
        if (!item.disabled && item.children) {
          this.nodesCatRecursive(item.children)
        }
      })
      return nodes
    },
    nodesCatTickedSave () {
      this.$api({
        method: 'put',
        url: '/mdm/orgapplycategory/updateDepCategoryList',
        params: {
          depId: this.nodeSelected,
          categoryIds: this.nodeTickedCat.join(',')
        },
        emulateJSON: true,
        useLoadLayer: true,
        useNotify: true,
        successCallback: ({ data }) => {
          this.nodeSelectedHandler(this.nodeSelected)
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
    },
    // 岗位下品类nodes数据获取
    async nodesPostCatGet (node) {
      await this.$api({
        method: 'post',
        url: '/mdm/orgapplycategory/query',
        params: {
          idPam: node.id,
          parentIdPam: node.parentId
        },
        emulateJSON: true,
        useLoadLayer: true,
        successCallback: ({ data }) => {
          let pHeader = this.$refs['orgTree'].getNodeByKey(node.parentId).header
          if (pHeader === 'company' || pHeader === 'root') {
            data.map(item => {
              item.disabled = false
            })
          }
          this.nodeTickedPostCat = []
          data.map(item => {
            if (item.selectFlag !== null) {
              this.nodeTickedPostCat.push(item.id)
            }
            item.disabled = item.controlFlag === null
          })
          let nodesPostCat = transformToTreeFormat(data, 'id', 'parentId', 'children')
          // if (pHeader === 'dep') {
          //   nodesPostCat[0].disabled = false
          //   nodesPostCat[0].children = this.nodesPostCatRecursive(nodesPostCat[0].children)
          // }
          this.nodesPostCat = nodesPostCat
          let arr = []
          this.nodesPostCat.map(item => {
            arr.push(item.id)
            if (item.children && item.children.length > 0) {
              item.children.map(item2 => {
                arr.push(item2.id)
              })
            }
          })
          this.nodeExpandedPostCat = arr
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
    },
    nodesPostCatRecursive (nodes) {
      nodes.map(item => {
        item.disabled = item.controlFlag === null
        if (item.children) {
          item.children.map(child => {
            if (child.disabled === false) {
              item.disabled = false
            } else {
              item.disabled = true
            }
          })
        }
        if (!item.disabled && item.children) {
          this.nodesPostCatRecursive(item.children)
        }
      })
      return nodes
    },
    nodesPostCatTickedSave () {
      this.$api({
        method: 'put',
        url: '/mdm/orgapplycategory/updateStationCategoryList',
        params: {
          stationId: this.nodeSelected,
          categoryIds: this.nodeTickedPostCat.join(',')
        },
        emulateJSON: true,
        useLoadLayer: true,
        useNotify: true,
        successCallback: ({ data }) => {
          this.nodeSelectedHandler(this.nodeSelected)
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
    },
    // 分配角色
    addRole () {
      this.roleForm = {
        roleIds: ''
      }
      this.$v.roleForm.$reset()
      this.roleAddDialog = true
    },
    selectRoleRowsHandler (arr, isError) {
      this.roleForm.roleIds = arr.join(',')
    },
    saveRoleAddHandler () {
      this.$v.roleForm.$touch()
      if (!this.$v.roleForm.$error) {
        this.loadingSave = true
        this.$api({
          method: 'put',
          url: '/mdm/rolestation/addRoleStation',
          params: {
            stationId: this.nodeSelected,
            ...this.roleForm
          },
          emulateJSON: true,
          useNotify: true,
          successCallback: ({ data }) => {
            this.roleAddDialog = false
            this.loadingSave = false
            this.nodeSelectedHandler(this.nodeSelected)
          },
          errorCallback (err) {
            console.log('未处理的业务级error：', err)
          }
        })
      }
    },
    delRoleRow (row) {
      this.$q.dialog({
        title: '删除',
        message: `确认要删除地点：${row.roleName} 吗？`,
        ok: true,
        cancel: true,
        persistent: true
      }).onOk(async () => {
        await this.$api({
          method: 'delete',
          url: `/mdm/rolestation/delete/${row.id}`,
          useLoadLayer: true,
          useNotify: true,
          successCallback: ({ data }) => {
            this.nodeSelectedHandler(this.nodeSelected)
          },
          errorCallback (err) {
            console.log('未处理的业务级error：', err)
          }
        })
      }).onCancel(() => {

      })
    },
    // 分配用户
    addUser () {
      this.userForm = {
        userIds: ''
      }
      this.$v.userForm.$reset()
      this.userAddDialog = true
    },
    selectUserRowsHandler (arr, isError) {
      this.userForm.userIds = arr.join(',')
    },
    saveUserAddHandler () {
      this.$v.userForm.$touch()
      if (!this.$v.userForm.$error) {
        this.loadingSave = true
        this.$api({
          method: 'put',
          url: '/mdm/userstation/addUserStation',
          params: {
            stationId: this.nodeSelected,
            ...this.userForm
          },
          emulateJSON: true,
          useNotify: true,
          successCallback: ({ data }) => {
            this.userAddDialog = false
            this.loadingSave = false
            this.nodeSelectedHandler(this.nodeSelected)
          },
          errorCallback (err) {
            console.log('未处理的业务级error：', err)
          }
        })
      }
    },
    delUserRow (row) {
      this.$q.dialog({
        title: '删除',
        message: `确认要删除地点：${row.userName} 吗？`,
        ok: true,
        cancel: true,
        persistent: true
      }).onOk(async () => {
        await this.$api({
          method: 'delete',
          url: `/mdm/userstation/delete/${row.id}`,
          useLoadLayer: true,
          useNotify: true,
          successCallback: ({ data }) => {
            this.nodeSelectedHandler(this.nodeSelected)
          },
          errorCallback (err) {
            console.log('未处理的业务级error：', err)
          }
        })
      }).onCancel(() => {

      })
    },
    // 部门分配申购组
    addDep () {
      let node = this.$refs['orgTree'].getNodeByKey(this.nodeSelected)
      this.queryParams = {
        idPam: node.id,
        parentIdPam: node.parentId,
        typeCode: this.depSecondTabs
      }
      this.depGroupForm = {
        businessIds: ''
      }
      this.$v.depGroupForm.$reset()
      this.depGroupAddDialog = true
    },
    selectDepGroupRowsHandler (arr, isError) {
      this.depGroupForm.businessIds = arr.join(',')
    },
    saveDepGroupAddHandler () {
      this.$v.depGroupForm.$touch()
      if (!this.$v.depGroupForm.$error) {
        this.loadingSave = true
        this.$api({
          method: 'put',
          url: '/mdm/groupdep/addGroupDep',
          params: {
            depId: this.nodeSelected,
            ...this.depGroupForm
          },
          emulateJSON: true,
          useNotify: true,
          successCallback: ({ data }) => {
            this.depGroupAddDialog = false
            this.loadingSave = false
            this.tableDataGetDep({
              pagination: this.paginationDep,
              filter: this.searchFormDep
            })
          },
          errorCallback (err) {
            console.log('未处理的业务级error：', err)
          }
        })
      }
    },
    delDepGroupRow (row) {
    },
    // 公司分配业务组织
    borgTypeGet () {
      this.$api({
        method: 'post',
        url: '/mdm/businessOrgType/queryNoPage',
        params: {
        },
        emulateJSON: true,
        useLoadLayer: true,
        successCallback: ({ data }) => {
          this.tabsList = data
          this.companySecondTabs = this.tabsList[0].code
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
    },
    addBorg () {
      // let node = this.$refs['orgTree'].getNodeByKey(this.nodeSelected)
      this.queryParams = {
        // idPam: node.id,
        // parentIdPam: node.parentId,
        typeCode: this.companySecondTabs
      }
      this.borgForm = {
        borgIds: ''
      }
      this.$v.borgForm.$reset()
      this.borgAddDialog = true
    },
    selectBorgRowsHandler (arr, isError) {
      this.borgForm.borgIds = arr.join(',')
    },
    saveBorgAddHandler () {
      this.$v.borgForm.$touch()
      if (!this.$v.borgForm.$error) {
        this.loadingSave = true
        this.$api({
          method: 'put',
          url: '/mdm/companyborg/addCompanyBorg',
          params: {
            companyId: this.nodeSelected,
            typeCode: this.companySecondTabs,
            ...this.borgForm
          },
          emulateJSON: true,
          useNotify: true,
          successCallback: ({ data }) => {
            this.borgAddDialog = false
            this.loadingSave = false
            this.nodeSelectedHandler(this.nodeSelected)
          },
          errorCallback (err) {
            console.log('未处理的业务级error：', err)
          }
        })
      }
    },
    delBorgRow (row) {
      this.$q.dialog({
        title: '删除',
        message: `确认要删除业务组：${row.groupName} 吗？`,
        ok: true,
        cancel: true,
        persistent: true
      }).onOk(async () => {
        await this.$api({
          method: 'delete',
          url: `/mdm/companyborg/deleteBatch`,
          params: {
            companyId: this.nodeSelected,
            ids: row.id
          },
          emulateJSON: true,
          useLoadLayer: true,
          useNotify: true,
          successCallback: ({ data }) => {
            this.nodeSelectedHandler(this.nodeSelected)
          },
          errorCallback (err) {
            console.log('未处理的业务级error：', err)
          }
        })
      }).onCancel(() => {

      })
    },
    // 岗位分配业务组
    groupTypeGet () {
      this.$api({
        method: 'post',
        url: '/mdm/businessGroupType/queryNoPage',
        params: {
        },
        emulateJSON: true,
        useLoadLayer: true,
        successCallback: ({ data }) => {
          this.tabsList = data
          this.postSecondTabs = this.tabsList[0].code
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
    },
    addGroup () {
      let node = this.$refs['orgTree'].getNodeByKey(this.nodeSelected)
      this.queryParams = {
        idPam: node.id,
        parentIdPam: node.parentId,
        typeCode: this.postSecondTabs
      }
      this.groupForm = {
        businessIds: ''
      }
      this.$v.groupForm.$reset()
      this.groupAddDialog = true
    },
    selectGroupRowsHandler (arr, isError) {
      this.groupForm.businessIds = arr.join(',')
    },
    saveGroupAddHandler () {
      this.$v.groupForm.$touch()
      if (!this.$v.groupForm.$error) {
        this.loadingSave = true
        this.$api({
          method: 'put',
          url: '/mdm/groupstation/addGroupStation',
          params: {
            stationId: this.nodeSelected,
            ...this.groupForm
          },
          emulateJSON: true,
          useNotify: true,
          successCallback: ({ data }) => {
            this.groupAddDialog = false
            this.loadingSave = false
            this.nodeSelectedHandler(this.nodeSelected)
          },
          errorCallback (err) {
            console.log('未处理的业务级error：', err)
          }
        })
      }
    },
    delGroupRow (row) {
      this.$q.dialog({
        title: '删除',
        message: `确认要删除业务组：${row.groupName} 吗？`,
        ok: true,
        cancel: true,
        persistent: true
      }).onOk(async () => {
        await this.$api({
          method: 'delete',
          url: `/mdm/groupstation/deleteBatch`,
          params: {
            stationId: this.nodeSelected,
            ids: row.id
          },
          emulateJSON: true,
          useLoadLayer: true,
          useNotify: true,
          successCallback: ({ data }) => {
            this.nodeSelectedHandler(this.nodeSelected)
          },
          errorCallback (err) {
            console.log('未处理的业务级error：', err)
          }
        })
      }).onCancel(() => {

      })
    },
    toDetails (id, type) {
      if (type === 'company') {
        this.$router.push({ name: 'CompanyDetails', params: { id } })
      }
      if (type === 'dep') {
        this.$router.push({ name: 'DepartmentDetails', params: { id } })
      }
      if (type === 'site') {
        this.$router.push({ name: 'SiteDetails', params: { id } })
      }
    }
  }
}
</script>
